<template>
  <div class="temp-management-container">
    <search-form :config-list="searchFormConfig" @search="search">
      <template #leftSlot>
        <!--左侧的插槽-->
        <el-button icon="Search" type="primary">新增</el-button>
      </template>
      <template #rightSlot>
        <!--右侧的插槽-->
        <el-button icon="Search" type="primary">导出</el-button>
      </template>
    </search-form>
    <custom-table
      :pagination="pagination"
      :table-config="tableConfig"
      @actions-click="actionsClick"
      @pagination-change="paginationChange"
    />
  </div>
</template>

<script setup>
  // import { getList } from '@/api/LogVirtually' //列表接口
  import { Delete, Plus, Search } from '@element-plus/icons-vue'
  import SearchForm from '@/views/component/SearchForm' //引入搜索组件
  import CustomTable from '@/views/component/CustomTable'
  import { onMounted } from 'vue' //引入表格跟分页组件

  //请求参数
  const queryForm = ref()
  //列表分页参数
  const pagination = reactive({
    page: 1, //每页条数
    limit: 10, //当前页
    total: 0,
    layout: 'total, sizes, prev, pager, next, jumper',
  })

  //搜索组件配置信息
  const searchFormConfig = {
    config: {
      layoutType: 1, //1:左右布局,2:上下布局
      leftPanelWidth: 0, //控制左边布局控件宽度
    },
    controlList: [
      { label: '项目名称', prop: 'name', type: 'input' },
      { label: '项目编码', prop: 'code', type: 'input' },
      // {
      //   label: "项目描述",
      //   prop: "desc",
      //   type: "select",
      //   list: [{ label: "未开始", value: 1 }, { label: "已开始", value: 2 }]
      // },
      {
        label: '时间',
        type: 'date',
        prop: 'date_name',
        valueFormat: 'Timestamp',
      },
      {
        label: '日期范围',
        type: 'dateRange',
        start: 'startTime',
        end: 'endTime',
      },
    ],
  }

  /*
    配置说明
    controlList:
    {
      label:标题，
      prop:字段值,
      type:控件类型，
      list:下拉选择项(仅type:select生效),
      valueFormat:定义返回类型为时间戳格式，否则为1990-10-10格式(仅日期控件生效),
      start:日期范围的开始时间字段值,
      end:日期范围的结束时间字段值
    }
   */

  const tableConfig = reactive({
    columns: [
      {
        label: '消费类型',
        prop: 'status',
        sortable: false,
        customType: 'ElTag',
        tagKeyValue: 'statusTag',
      },
      {
        label: '货币',
        prop: 'type',
        sortable: false,
        customType: 'ElTag',
        tagKeyValue: 'typeTag',
      },
      { label: '变动钻石/金币', prop: 'change_amount', sortable: true },
      { label: '当前钻石/金币', prop: 'current_amount', sortable: true },
      { label: '备注', prop: 'remarks', sortable: false },
      { label: '消费时间', prop: 'create_time', sortable: false },
      {
        label: '操作',
        action: true,
        actions: [
          { fnName: 'add', title: '新增', type: 'primary', isTextBtn: false },
          { fnName: 'del', title: '删除', type: 'danger', isTextBtn: true },
        ],
        // permissionCode: 'approveBtn', // 权限
        // key: 'status', // 按钮需要判断的值
        // showValue: 1, // 判断展示时的值
      },
    ],
    tagConfig: {
      statusTag: {
        consume: {
          name: '消费',
          type: 'success',
        },
        recharge: {
          name: '充值',
          type: '',
        },
        patch_order: {
          name: '补单',
          type: 'info',
        },
      },
      typeTag: {
        diamond: {
          name: '钻石',
          type: '',
        },
        species: {
          name: '金币',
          type: 'warning',
        },
      },
    },
    list: [],
    listLoading: false,
  })

  //点击搜索触发
  const search = (form) => {
    console.log(form)
    pagination.page = 1
    queryForm.value = form
    queryProject()
  }

  //点击表格操作按钮回调
  const actionsClick = (data) => {
    console.log('actionsClick===', data)
  }

  //分页控件点击操作
  const paginationChange = (data) => {
    const { val, type } = data
    pagination[type] = val
    queryProject()
  }

  //请求列表数据
  const queryProject = () => {
    tableConfig.listLoading = true
    getList({
      ...queryForm.value,
      limit: pagination.limit,
      page: pagination.page,
    })
      .then((result) => {
        console.log('result', result)
        tableConfig.list = result.data.data
        tableConfig.listLoading = false
        pagination.total = result.data.total
      })
      .catch(() => {
        tableConfig.listLoading = false
      })
  }

  onMounted(() => {
    // queryProject()
  })
</script>

<style scoped></style>
